<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }
        
        .go2top {
            width: 50px;
            height: 50px;
            background-color: red;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
    </style>


    <script>
        // $(document).ready(function() {
        //     var $go2top = $('.go2top');
        //     $go2top.on('click', function() {
        //         $('body').animate({
        //             scrollTop: 0
        //         }, 500);
        //         $(window).scrollTop(0);
        //     });

        //     $(window).on('scroll', function() {
        //         var $this = $(this);
        //         var h = $this.height();
        //         var st = $this.scrollTop();

        //         if (st > h) {
        //             $go2top.slideDown();
        //         } else {
        //             $go2top.slideUp();
        //         }
        //     })
        // });
    </script>
</head>

<body>

    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
        <li>item11</li>
        <li>item12</li>
        <li>item13</li>
        <li>item14</li>
        <li>item15</li>
        <li>item16</li>
        <li>item17</li>
        <li>item18</li>
        <li>item19</li>
        <li>item20</li>
        <li>item21</li>
        <li>item22</li>
        <li>item23</li>
        <li>item24</li>
        <li>item25</li>
        <li>item26</li>
        <li>item27</li>
        <li>item28</li>
        <li>item29</li>
        <li>item30</li>
        <li>item31</li>
        <li>item32</li>
        <li>item33</li>
        <li>item34</li>
        <li>item35</li>
        <li>item36</li>
        <li>item37</li>
        <li>item38</li>
        <li>item39</li>
        <li>item40</li>
        <li>item41</li>
        <li>item42</li>
        <li>item43</li>
        <li>item44</li>
        <li>item45</li>
        <li>item46</li>
        <li>item47</li>
        <li>item48</li>
        <li>item49</li>
        <li>item50</li>
    </ul>

    <div class="go2top">

    </div>
    <script src="../jQuery库/jquery-3.1.0.min.js"></script>
    <script>
        $(document).scroll(function() {
            let sTop = $(this).scrollTop();
            if (sTop >= 600) {
                $(".go2top").slideDown();
            } else {
                $(".go2top").slideUp();
            }
        })
        $(".go2top").click(function() {
            $("html").animate({
                scrollTop: 0
            }, 1000)
        })
    </script>
</body>

</html>